<script setup>
//获取vue路由
import {useRouter} from "vue-router";

import {UserFilled, Lock} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import xx from "@/axios/xx";
import {ElMessage} from "element-plus";
const info = reactive({
  url:'http://localhost:10001/verify',
  form:{}
})

let isRemember = ref(false); // 添加对记住密码状态的引用

const router=useRouter();
const login=() =>{
  xx.post('/userInfo/checkLogin',info.form).then(res => {
    if(res.code === 200){

      ElMessage({
        message: res.message,
        type: 'success',
      })
      //存储区
      sessionStorage.setItem("user",JSON.stringify(res.data))
      router.push('/layout')
    }else{
      ElMessage.error(res.message)
    }
  })

}

const register = () => {
  router.push("/register")
}

const savePassword = async () => {
  try {
    await xx.post('/savePassword', {
      username: info.form.username,
      encryptedPassword: encryptPassword(info.form.password), // 加密密码后再保存
      isRemember: isRemember.value,
    });
    // 更新 cookie 或 session storage
    if (isRemember.value) {
      setRememberMeCookie();
    }
    ElMessage.success('密码已保存');
  } catch (error) {
    ElMessage.error(error.message);
  }
};

// 新增的函数，用于加密密码
function encryptPassword(password) {
  // 使用适当的方法（例如哈希加盐）来加密密码，这里仅做展示
  // 通常在实际应用中使用专业的库如bcrypt.js等
  return CryptoJS.SHA256(password);
}

const change = () => {
  info.url='http://localhost:10001/verify?'+Math.random()
}


</script>

<template>
  <!-- HTML代码区 -->
  <div class="main">
    <br>
    <br>
    <br><br><br>
    <div class="lg">
      <div class="title">中小型金融贷款管理平台</div>
      <div class="ipt">
        <br><br>
        <div class="ipt-1">
          <el-form :model="info.form" label-width="auto" style="max-width: 400px">
            <el-form-item >
              <el-input style="height: 40px" v-model="info.form.username" placeholder="用户名"  :prefix-icon="UserFilled" />
            </el-form-item>
            <el-form-item >
              <el-input style="height: 40px" v-model="info.form.password" type="password" placeholder="密码" :prefix-icon="Lock"/>
            </el-form-item>
            <el-form-item >
              <el-input style="width: 150px;height: 40px" v-model="info.form.verifyCode" placeholder="验证码"  />
              <img :src="info.url" @click="change" style="margin-left: 15px;cursor: pointer" alt="">
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="isRemember" >
                记住密码
              </el-checkbox>
              &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
              &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
              &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
              <el @click="register" style="height: 40px; font-size: 18px; color: blueviolet;cursor: pointer;text-decoration: underline">注册</el>
            </el-form-item>


            <el-form-item >
              <el-button type="primary" @click="login" style="width: 100%;;height: 40px">登录</el-button>

            </el-form-item>

          </el-form>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped>
.main{
  /*background-color: rgba(11, 42, 99, 0.71);*/
  width: 100%;
  height: 100vh;
  background: url('@/assets/imgs/11.jpg');
  background-size: 100%;
}
.lg{
  width: 650px;
  height: 400px;
  margin: 0 auto;
}
.title{
  height: 80px;
  font-size: 30px;
  font-weight: bold;
  color: azure;
  text-align: center;
  line-height: 80px;
}
.ipt{
  height: 340px;
  background-color: aliceblue;
  border-radius: 10px;
}
.ipt-1{
  width: 400px;
  margin: 0 auto;
}
</style>